<template>
  <a-layout>
    <a-layout-sider>
      <div class="userInfo">
        <div>
          {{Name}}
        </div>
        <div @click="setting()"><SettingOutlined /></div>
      </div>
      <a-menu
        id="dddddd"
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        style="width: 100%"
        mode="inline"
        @click="handleClick"
      >
        <a-sub-menu key="sub1" @titleClick="titleClick">
          <template #icon>
            <UserOutlined />
          </template>
          <template #title>我的规划</template>
          <a-menu-item key="/all">全部</a-menu-item>
          <a-menu-item key="/oneDay">我的一天</a-menu-item>
          <a-menu-item key="/oneWeek">我的一周</a-menu-item>
          <a-menu-item key="/oneMonth">我的一月</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2" @titleClick="titleClick">
          <template #icon>
            <AppstoreOutlined />
          </template>
          <template #title>辅助工具</template>
          <a-menu-item key="/timer">专注计时器</a-menu-item>
          <a-menu-item key="/notes">临时便利贴</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #icon>
            <BarChartOutlined />
          </template>
          <template #title>统计数据</template>
          <a-menu-item key="weekStatistics">一周规划完成程度</a-menu-item>
          <a-menu-item key="monthStatistics">一月规划完成程度</a-menu-item>
          <a-menu-item key="yearStatistics">一年规划完成程度</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content class="Content">
        <!-- <router-view v-slot="{ Component }">
          <keep-alive include="timer">
            <component :is="Component"></component>
          </keep-alive>
        </router-view> -->

        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { useRouter } from "vue-router";
import { get } from "../utils/request"
import { defineComponent, ref, watch,onMounted } from "vue";
import {
  AppstoreOutlined,
  SettingOutlined,
  BarChartOutlined,
  UserOutlined
} from "@ant-design/icons-vue";
export default defineComponent({
  components: {
    AppstoreOutlined,
    SettingOutlined,
    BarChartOutlined,
    UserOutlined
  },
  setup() {
    const router = useRouter();
    const selectedKeys = ref(["/all"]);
    const openKeys = ref(["sub1"]);
    const Name = ref('');
    onMounted(() => {
      get('/userInfo').then((res) => {
        Name.value = res.data.userInfo[0].Name
      })
    })

    // 导航栏
    const handleClick = (e) => {
      console.log("click", e);
      router.push({
        path: e.key,
      });
    };
    const titleClick = (e) => {
      console.log("titleClick", e);
    };
    watch(
      () => openKeys,
      (val) => {
        console.log("openKeys", val);
      }
    );

    // 设置点击事件
    const setting = () => {
      router.push({
        path:'/userInfo'
      })
    }

    return {
      selectedKeys,
      openKeys,
      handleClick,
      titleClick,
      setting,
      Name,
    };
  },
});
</script>

<style lang="less" scoped>
.ant-layout.ant-layout-has-sider {
  height: 100%;
  .userInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    img {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    height: 50px;
    line-height: 50px;
    padding: 0 24px;
  }
  :deep(.ant-layout-sider-children) {
    background: rgb(226, 229, 238);
  }
  :deep(.ant-layout-content) {
    background: #ffffff;
  }
  :deep(.ant-menu) {
    background: #e2e5ee;
  }
}

.Content {
  overflow-y: scroll;
}
</style>